<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:频道页面
@author:成都市一颗优雅草科技有限公司     
@version V3.0
@松鼠聚合直播系统
注意：本前端源码遵循 蜻蜓优雅草产品开源授权协议，本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->










<template>
	<view>
		<view class="image-list">
			<view class="image-item" 
					:class="'image-item' + (isLogin ? '' : ' image-item-nologin')" 
					v-for="(video,index) in videoList" :key="index"  @click="playVideo(index)">
				<view class="blank-image" v-if="!video.img"></view>
				<image class="image"
					:src="video.img"
					v-if="video.img"
				  />
				  <div class="play-num" v-if="0">{{video.Number}}观看</div>
				  <div class="like-button" v-if="0"><van-icon name="like" /></div>
				  <div class="paly-tip" v-if="!isLogin && video.address">登陆后可查看</div>
				  <div class="info-item" v-if="video.address">
					<div class="item-title">{{video.title ? video.title : '无标题'}}</div>
					<div class="item-categroy" v-if="0">live</div>
				  </div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				title:"",
				isLogin:false,
				videoList:[]
			}
		},
		onLoad(){
			uni.setNavigationBarTitle({
			    title: this.appInfo.pindaoTitle
			});
			uni.showLoading({
			    title: '加载中'
			});
			this.loadList();
		},
		onShow(){
			this.isLogin = this.appInfo.isLogin();
		},
		onPullDownRefresh(){
			this.loadList();
		}
		,methods:{
			loadList:function () {
				var that = this;
				const file = this.appInfo.pindaoAddress;
				this.request.getApiList(file,function (response) {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if(response && typeof response.data.zhubo != 'undefined'){
					  that.videoList = response.data.zhubo;
					}else if(response && typeof response.data.result != 'undefined'){
					  that.videoList = response.data.result.zhubo;
					}
				},function (error) {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			playVideo:function(index){
				if(!this.videoList[0].adress && !this.videoList[0].address){
					uni.showToast({title:"数据还未加载完成",icon:"none"});
					return;
				}
				if(!this.isLogin){
					uni.showModal({
						title:"登陆提示",
						content:"请先登陆会员后再试！",
						showCancel:false,
						success(){
							uni.navigateTo({
								url:"../login/login"
							});
						}
					});
					return;
				}
				this.appInfo.playInfo = this.videoList[index];
				uni.navigateTo({
					url:"../play/play"
				})
			}
		}
	}
</script>

<style>
	.image-list{
	  padding: 10rpx;
			width: 730rpx;
			display: flex;
			flex-direction: row;
			flex-wrap:wrap;
	}
	.image-list .image-item{
	  padding: 10rpx;
			width: 343rpx;
			height: 343rpx;
	  position: relative;
			display: flex;
	}
	.image-list .image-item .image{
			  width: 343rpx;
			  height: 343rpx;
			  border-radius: 10rpx;
	}
	.image-list .image-item-nologin .image{
			  filter: blur(5rpx);
			  -webkit-filter: blur(5rpx);
			}
	.blank-image{
	  width: 343rpx;
	  height: 343rpx;
	  border-radius: 10rpx;
	  background: whitesmoke;
	}
	.play-num{
	  position: absolute;
	  color: #c9cfcd;
	  font-size: 26rpx;
	  top: 30rpx;
	  left: 20rpx;
	}
	.like-button{
	  position: absolute;
	  color: white;
	  font-size: 36rpx;
	  top: 25rpx;
	  right: 30rpx;
	}
	.paly-tip{
	  position: absolute;
	  color: #d4cccb;
	  font-size: 30rpx;
	  top: 150rpx;
	  left: 80rpx;
	  font-family: Arial;
	}
	.info-item{
	  position: absolute;
	  color: #ffffff;
	  font-size: 25rpx;
	  bottom: 40rpx;
	  left: 20rpx;
	  font-family: Arial;
	  background: url("~@/static/toptip.png") center no-repeat;
			background-size: cover;
	  width: 235rpx;
	  height: 39rpx;
	  line-height: 39rpx;
	}
	.info-item .item-title{
	  display: inline-block;
	  padding-left: 35rpx;
	  width: 175rpx;
	  height: 39rpx;
	  line-height: 39rpx;
	  font-size: 24rpx;
	  overflow: hidden;
	}
	.info-item .item-categroy{
	  font-size: 20rpx;
	  display: inline-block;
	  padding-left: 20rpx;
	  width: 85rpx;
	  height: 39rpx;
	  text-transform:Uppercase;
	  overflow: hidden;
	}
</style>
